<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>probe_demo</title>
	<head>
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/toolbar.css">
		<link rel="stylesheet" href="css/tabs.css">
		<link rel="stylesheet" href="css/section.css">
		<link rel="stylesheet" href="css/probe.css">
		<link rel="stylesheet" href="css/grid.css">
	</head>
</head>
<body>
	<div class="oc-dialog oc-dialog-max">
		<header>
			<i></i>
			<label>{{title}}</label>
		</header>
		<nav>
			<button>-</button>
			<button>+</button>
			<button class="danger">&times;</button>
		</nav>		
		<main>
			<nav class="oc-toolbar">
				<button type="button"><img src="images/test.png"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<hr/>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
				<hr/>
				<button><img src="http://usr.im/16x16"/></button>
				<button><img src="http://usr.im/16x16"/></button>
			</nav>
			<div>
				<section>
					<iframe style="
						width: 100%;
						height: 100%;
						border: none;
					" src="#"></iframe>
				</section>
				<aside class="aside-right">
					<div class="heard">
						<button>&and;</button>
						<button class="right">-</button>
					</div>
					<nav class="oc-toolbar">
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<hr/>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
						<hr/>
						<button><img src="http://usr.im/16x16"/></button>
						<button><img src="http://usr.im/16x16"/></button>
					</nav>
					<div class="grid">
						<div class="oc-tabs grid" style="min-width:12rem;">
							<ul><!--标题-->
								<li class="active"><a>图形</a></li>
								<li><a>交互编码</a></li>
								<li><a>源码</a></li>
							</ul>
							<section class="active1 grid">
							<div class="process-list">
								<ul >
									<li style="background:#d3d3d3">
										<button class="ico ico-add">+</button>
										<button class="ico ico-up">上</button>
										<button class="ico ico-delete">del</button>
										<button class="ico ico-down">中</button>
										hhhhhhhhhhhhhh
									</li>
									<li>gggggggggggggggg</li>
									<li>ddddddddddddddddd</li>
									<li style="background:#d3d3d3">
										ssssssssssssssssssss
										<button class="ico ico-add">+</button>
										<button class="ico ico-up">上</button>
										<button class="ico ico-delete">del</button>
										<button class="ico ico-down">下</button>
									</li>
									<li>ssssssssssssssssss</li>
									<li>ssssssssssssssssss</li>
									<li>ssssssssssssssssss</li>
									<li>ssssssssssssssssss</li>
									<li>ssssssssssssssssss</li>
								</ul>
								<button>+</button>
							</div>
							</section>
							<section>tabs2内容区域<span>区域标题2</span></section>
							<section>tabs3内容区域<span>区域标题3</span></section>
							<section>tabs4内容区域<span>区域标题4</span></section>
						</div>
					</div>
					<nav class="oc-toolbar">
						<button>ico</button>
						<button>ico</button>
					</nav>
				</aside>
			</div>
		</main>
	</div>
</body>
</html>